<!DOCTYPE html>
<html>

<head>
    <title>客户列表</title>
    <meta charset="UTF-8">
    <style type="text/css">
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 10px;
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
        }

      .customer_header {
            text-align: center;
            margin-bottom: 20px;
            /* 去除背景颜色 */
        }

      .customer-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }

        .customer-list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;  /* 整体居中 */
            align-items: center;  /* 垂直居中，可根据需要添加或删除 */
            flex-direction: row;  /* 确保水平排列 */

            > * {  /* 针对内部的每个元素 */
                justify-self: flex-start;  /* 内部元素靠左 */
            }
        }

      .customer-item {
            width: 30%;  /* 电脑访问时每行显示三个，所以宽度改为 30%左右 */
            padding: 15px;
            border: 1px solid #ddd;
            margin-bottom: 10px;
            box-sizing: border-box;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        @media only screen and (max-width: 600px) {  /* 手机访问时的样式 */
        .customer-item {
                width: 100%;  /* 手机访问时每行显示一个，宽度改为 100% */
            }
        }

      .customer-item h3 {
            margin: 0;
            color: #4caf50;
        }

      .customer-item p {
            margin: 5px 0;
            color: #666;
        }

      .editbtn,
      .deletebtn {
            background-color: #007bff;
            border: none;
            color: white;
            padding: 5px 8px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 14px;
            margin: 2px 0px;
            cursor: pointer;
        }

      .editbtn:hover,
      .deletebtn:hover {
            background-color: #0056b3;
        }

        #addcust {
            display: block;
            width: 120px;
            margin: 10px auto;
            text-align: center;
            background-color: #007bff;
            color: #fff;
            border: none;
            padding: 8px 10px;
            cursor: pointer;
        }

      .button-container {
            position: absolute;
            top: 10px;
            right: 10px;
        }

      .deletebtn {
            background-color: red;
        }

        /* 替换为新的搜索框样式 */
        #searchInput {
            padding: 12px;
            border: 2px solid #007bff; /* 修改边框样式和颜色 */
            border-radius: 5px;
            width: 100%;
            max-width: 300px;
            margin-bottom: 20px;
            box-sizing: border-box;
            font-size: 16px;
            outline: none; /* 去掉默认的蓝色外边框 */
        }

        #searchInput::placeholder {
            color: #999;
        }

        #searchInput:focus {
            border-color: #0056b3; /* 设置获取焦点时的边框颜色 */
        }
    </style>
</head>

<body>
    <div class="customer_header">
        <h1>客户列表</h1>
        <a onclick="location.href='/add_customer';" target="_blank" id="addcust">添加客户</a>
    </div>
    <input type="text" id="searchInput" class="form-control mb-3" placeholder="搜索客户...">
    <div class="customer-list">
        {% for row in rows %}
        <div class="customer-item">
            <h3 class="card-title">客户 ID: {{row[0]}}</h3>
            <p class="card-text">公司名称: {{row[1]}}</p>
            <p class="card-text">信用代码: {{row[2]}}</p>
            <p class="card-text">地址: {{row[3]}}</p>
            <p class="card-text">联系人: {{row[4]}}</p>
            <p class="card-text">联系电话: {{row[5]}}</p>
            <div class="button-container">
                <p><a href="/edit_customer?id={{row[0]}}" class="editbtn" onclick="loadContent('/edit_customer?id={{row[0]}}')">编辑</a></p>
                <p>
                    <form action="/delete_customer/{{row[0]}}" method="post">
                        <button type="submit" class="deletebtn" onclick="return confirm('确定要删除吗？')">删除</button>
                    </form>
                </p>
            </div>
        </div>
        {% endfor %}
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const searchInput = document.getElementById('searchInput');
            const customerItems = document.querySelectorAll('.customer-item');

            searchInput.addEventListener('input', function () {
                const searchText = searchInput.value.toLowerCase();

                customerItems.forEach(function (customerItem) {
                    const title = customerItem.querySelector('.card-title').textContent.toLowerCase();
                    const companyName = customerItem.querySelectorAll('.card-text')[0].textContent.toLowerCase();
                    const creditCode = customerItem.querySelectorAll('.card-text')[1].textContent.toLowerCase();
                    const address = customerItem.querySelectorAll('.card-text')[2].textContent.toLowerCase();
                    const contactPerson = customerItem.querySelectorAll('.card-text')[3].textContent.toLowerCase();
                    const contactNumber = customerItem.querySelectorAll('.card-text')[4].textContent.toLowerCase();

                    if (title.includes(searchText) || companyName.includes(searchText) || creditCode.includes(searchText) || address.includes(searchText) || contactPerson.includes(searchText) || contactNumber.includes(searchText)) {
                        customerItem.style.display = '';
                    } else {
                        customerItem.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>

</html>